<template>
  <div style="height: 100%" v-loading="loading">
    <van-nav-bar
      title="成品入库确认信息"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />
    <div style="width: 100%;overflow: scroll;height: 150px;">
      <van-cell
          title="开始日期"
          is-link
          :value="startValue"
          @click="showPopup(1)" />
      <van-popup v-model="startShow" position="bottom">
        <van-datetime-picker
            v-model="currentDateStart"
            title="选择开始日期"
            :min-date="minDate"
            :max-date="maxDate"
            type="date"
            :loading="isLoadingShow"
            :formatter="formatter"
            @cancel="startShow = false"
            @confirm="confirmPicker(currentDateStart,1)"
        />
      </van-popup>
      <van-cell
          title="结束日期"
          is-link
          :value="endValue"
          @click="showPopup(2)" />
      <van-popup v-model="endShow" position="bottom">
        <van-datetime-picker
            v-model="currentDateEnd"
            title="选择结束日期"
            :min-date="minDate"
            :max-date="maxDate"
            type="date"
            :loading="isLoadingShow"
            :formatter="formatter"
            @cancel="endShow = false"
            @confirm="confirmPicker(currentDateEnd,2)"
        />
      </van-popup>

      <van-button @click="queryProductionVerifyDate"
                  style="
                    border: #3793fb solid 1px;
                    border-radius: 2px;
                    background-color: #3793fb;
                    line-height: var(--footer-height);
                  "
                  type="primary" block>查询</van-button>
    </div>
    <div style="width: 100%;overflow: scroll;height: 350px;" >
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="materialdes" label="物料描述" width="150">
        </el-table-column>
        <el-table-column prop="batchno" label="批次" width="100">
        </el-table-column>
        <el-table-column prop="location" label="库位" width="100">
        </el-table-column>
        <el-table-column prop="productionlotno" label="生产批" width="100">
        </el-table-column>
        <el-table-column prop="packinglotno" label="包装批" width="100">
        </el-table-column>
        <el-table-column prop="batchquantity" label="已确认" width="50">
        </el-table-column>
        <el-table-column prop="notconfirm" label="未确认" width="50">
        </el-table-column>
        <el-table-column prop="materialno" label="物料" width="100">
        </el-table-column>
        <el-table-column prop="productionno" label="订单号" width="100">
        </el-table-column>
        <el-table-column prop="postdate" label="预收日期" width="100">
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangePage"
          :current-page="currentPage"
          :page-size="pageSize"
          small
          layout="total, prev, pager, next"
          :total="size">    <!--//这是显示总共有多少数据，-->
      </el-pagination>
    </div>

    <van-button
      @click="onChoose"
      style="
        position: fixed;
        bottom: 0px;
        border: #3793fb solid 1px;
        border-radius: 2px;
        background-color: #3793fb;
        line-height: var(--footer-height);
      "
      type="primary"
      block
      >选择</van-button
    >
  </div>
</template>

<script>
import 'vant/lib/index.css'
export default {
  data() {
    return {
      startValue: '',
      endValue: '',
      currentDateStart: '',
      currentDateEnd: '',
      startShow: false,
      endShow: false,
      isLoadingShow: true,
      // minDate: new Date(2020, 1, 1),
      // maxDate: new Date(2050, 12, 31),
      minDate: this.getYearBeforeDate(),
      maxDate: this.getMonthAfterDate(),
      currentPage: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      loading: false,
      size:0
    };
  },
  mounted() {
    // this.getProductInboundInfoList();
  },
  created() {
    this.getTime(); // 加载页面显示默认时间
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
    },
    handleCurrentChangePage: function(currentPage){
      this.currentPage = currentPage;
    },
    //根据日期筛选查询
    async queryProductionVerifyDate() {
      if(this.startValue == null || this.startValue === ''){
        this.$message({
          message: "请选择开始日期",
          type: "error",
        });
        return;
      }
      if(this.endValue == null || this.endValue === ''){
        this.$message({
          message: "请选择结束日期",
          type: "error",
        });
        return;
      }
      let request = {
        warehousingdatebegin: this.startValue,
        warehousingdateend: this.endValue,
        plant: localStorage.getItem("plant"),
      };
      const {data: res} = await this.$http.post(
          "/ProductionVerifyDate",
          request
      );
      this.tableData = res;
      console.log(res);
      this.size = res.length
    },
    //返回
    goBack() {
      this.$router.push({
        path: "/ScanView",
        query: { title: '成品标签扫描',key:4 },
      });
    },
    setCurrent(row) {
      this.$refs.tableData.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    /*async getProductInboundInfoList() {
      let request = {};
      const { data: res } = await this.$http.post(
        "/ProductionVerifyDate",
        request
      );
      this.tableData = res;
      this.size = res.length
    },*/
    onChoose() {
      let codeInfo = this.currentRow.materialno + "," + this.currentRow.batchno;
      this.$router.push({
        path: "/ProductInboundConfirm",
        query: { codeInfo: codeInfo },
      });
    },

    // 显示弹窗1-开始时间;2-结束时间
    showPopup (val) {
      if(val === 1){
        this.startShow = true
      }else if(val === 2){
        this.endShow = true
      }
      this.isLoadingShow = true
      setTimeout(() => {
        this.isLoadingShow = false
      }, 500)
    },
    // 确认选择之后的时间
    confirmPicker (val,type) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      if(type === 1){
        this.startValue = `${year}-${month}-${day}`
        this.startShow = false
      }else if(type === 2){
        this.endValue = `${year}-${month}-${day}`
        this.endShow = false
      }
    },
    // 默认显示当前时间
    getTime () {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let d2 = date.getDate() - 1
      let h = date.getHours()
      let min = date.getMinutes()
      // let s = date.getSeconds()
      if (m >= 1 && m <= 9) { m = `0${m}` }
      if (d >= 1 && d <= 9) { d = `0${d}` }
      if (d2 >= 1 && d2 <= 9) { d2 = `0${d2}` }
      if (h >= 0 && h <= 9) { h = `0${h}` }
      if (min >= 0 && min <= 9) { min = `0${min}` }
      // if (s >= 0 && s <= 9) { min = `0${s}` }
      this.startValue = `${y}-${m}-${d2}`
      this.endValue = `${y}-${m}-${d}`
      this.queryProductionVerifyDate()
    },
    // 日期选项格式化函数
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },

  },
};
</script>

<style>
</style>
